<template>
  <view class="container">
    <view class="avatar-container">
      <image :src="avatarUrl" class="avatar" mode="aspectFill"></image>
      <!-- <view class="avatar-mask"></view> -->
    </view>
  </view>
  <button class="but" @tap="chooseImage">上传头像</button>

</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      avatar: (state) => state.userInfo.avatar,
    }),
  },
  data() {
    return {
      avatarUrl: '', // 头像图片地址
    }
  },
  onLoad() {
    // 获取用户头像
    this.avatarUrl = this.avatar;
  },
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.$store.commit('setUserAvatar', res.tempFilePaths[0]);
          this.avatarUrl = res.tempFilePaths[0];
        },
      })
    },
  },
}
</script>

<style>
page{
  background-color: #f0f8fa;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 66vh;
  background-color: #f0f8fa;
}

.avatar-container {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 四周都有阴影 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #fff;
}
.but{
  width: 94%;
  margin: auto;
  border-radius: 50rpx;
  background-color: #A2B148;
  color: #fff;
}
</style>
